import { SvgComponent } from "@/components/base/Svg"
import styled from "@emotion/styled"
import { memo, ReactNode, useEffect, useState } from "react"
import { Option } from "../types/bet"

interface ModalProps {
    title: ReactNode
    options: Option[]
    selected: string
    onSelect: (status: string) => void
    onClose?: () => void
}

const Content = styled.div`
    background: #f2f2f3f2;
    font-family: Gilroy;
    padding: 0 16rem 40rem;
    border-top-left-radius: 10rem;
    border-top-right-radius: 10rem;
    overflow: hidden;
`

const ModalHeader = styled.div`
    height: 60rem;
    line-height: 60rem;
    position: relative;
`

const Title = styled.div`
    font-weight: 700;
    font-size: 18rem;
    text-align: center;
`

const CloseBtn = styled.div`
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24rem;
    height: 24rem;
    display: flex;
    justify-content: center;
    align-items: center;
`

const SelectBtn = styled.div`
    width: 16rem;
    height: 16rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 16rem;
    top: 50%;
    transform: translateY(-50%);
`

const OptionBlock = styled.div`
    background: white;
    border-radius: 10rem;
    margin-bottom: 4rem;
    font-weight: 500;
    font-size: 16rem;
    height: 48rem;
    line-height: 48rem;
    color: #40444f;
    position: relative;
    padding: 0 16rem;
`

const IconCloseSvg = styled(SvgComponent("pages/HomePage/icon_close.svg"))``
const IconSelectSvg = styled(SvgComponent("pages/BetRecordPage/icon_select.svg"))``

export const ModalSelector = memo(
    ({ selected, onSelect, onClose, options = [], title = "" }: ModalProps) => {
        const [_selected, _setSelected] = useState<string>(selected)

        useEffect(() => {
            onSelect(_selected)
        }, [_selected, onSelect])

        return (
            <Content>
                <ModalHeader>
                    <Title>{title}</Title>
                    <CloseBtn onClick={onClose}>
                        <IconCloseSvg />
                    </CloseBtn>
                </ModalHeader>
                {options.map(({ label, value }, idx) => (
                    <OptionBlock
                        key={`option,${value},${idx}`}
                        onClick={() => {
                            _setSelected(value)
                            onClose?.()
                        }}
                    >
                        {label}
                        {_selected === value && (
                            <SelectBtn>
                                <IconSelectSvg />
                            </SelectBtn>
                        )}
                    </OptionBlock>
                ))}
            </Content>
        )
    },
)
